
import "./index.scss"
import React, { Component } from 'react';
import {Layout,Dropdown,Menu,Avatar,Tag,Modal} from "antd"
import {DownOutlined,MenuUnfoldOutlined,MenuFoldOutlined,UserOutlined,ExclamationCircleOutlined} from  "@ant-design/icons"
import myuser from '../../mobx/myuser';
import {observer} from "mobx-react"
import { baseURL } from '../../api/http';
import {roleList,history} from "../../utils"
import { ajax } from '../../api';


const {Header} = Layout
@observer
class MyHead extends Component {

    state={
        menu :(
            <Menu>
              <Menu.Item key="0">
                  <div onClick={()=>this.startUpload()}>
                    更改头像
                  </div>
              </Menu.Item>
              <Menu.Item>
                  <div onClick={()=>this.loginout()}>
                    退出登录
                  </div>
              </Menu.Item>
            </Menu>
          ),
          
    }

    startUpload=()=>{
        this.file.click()
    }

    uploadFile=()=>{
        var file = this.file.files[0]
        var data = new FormData();
        data.append("file",file)
        ajax.uploadavatar(data).then(res=>{
            if(res.code==200){
                myuser.changeUserOne({
                    avatar:res.avatar
                })
            }
        })
    }

    loginout=()=>{
        Modal.confirm({
            title: '登出提示',
                icon: <ExclamationCircleOutlined />,
                content: '你确定要退出登录吗?',
                okText: '确认',
                cancelText: '取消',
                onOk:()=>{
                    history.push("/login")
                    localStorage.removeItem('token')
                    myuser.qingkong({})
                }
          });
    }

    render() {
        const {menu} =this.state
        const {user} = myuser
        return (
            <Header style={{ padding: "0 24px" ,backgroundColor:"#fff"}}>
                <div style={{display:"flex",alignItems:"center",height:64,justifyContent:'space-between'}}>
                    <h1 style={{fontSize:20,fontWeight:600}}>德添汽车维修4S店管理系统</h1>
                    {
                        user.username&&<div className="head-right">
                        <Dropdown overlay={menu}>
                            <a className="ant-dropdown-link" style={{height:"100%",display:"inline-block"}} onClick={e => e.preventDefault()}>
                                {
                                    user.avatar?
                                    <Avatar style={{margin:'0 5px'}} size={35} src={user.avatar.replace(/public/,baseURL)}/>:
                                    <Avatar style={{margin:'0 5px'}} size={35} icon={<UserOutlined />}/>
                                }
                                <span style={{fontSize:16,margin:'0 5px'}}>{user.username}</span>
                                <Tag style={{margin:'0 5px'}} color={roleList[user.role].color}>
                                    {roleList[user.role].name}
                                </Tag>
                                <DownOutlined />
                            </a>
                        </Dropdown>,
                    </div>
                    }
                    <input type="file" ref={el=>this.file=el} style={{display:"none"}} onChange={this.uploadFile} />
                </div>
            </Header>
        );
    }
}

export default MyHead;